<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>S&TV-KIDS</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
<link rel="shortcut icon" href="/favicon.png" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="framework/jquery-1.5.min.js"></script>
<script type="text/javascript" src="js/page_event.js"></script>
<script type="text/javascript" src="js/localstorage.js"></script>
<script type="text/javascript" src="js/spin.js"></script>
<script type="text/javascript" src='js/swipe.js'></script>
<script language="javascript">
<!--
	var page = 0;
	var total = 0;
	var json_url = "";
	var $list;
	var $featured;
	var blist = true;
	var fav_list;

	$(document).ready(function()
	{
		Featured();
 	});

	$(window).scroll(function()
	{
		// Android more
		if($(window).scrollTop() == $(document).height() - $(window).height())
		{
			if(page > 0 && page < total)
			{
				if(blist)
				{
					$("#load").show();
					More();
				}
			}
		}	
	});
	
	function LinkList(type, idx)
	{
		/*
		for(i=0; i<3; i++)
		{
			if(i == idx)
				$('a')[i].setAttribute('id','btn_up');
			else
				$('a')[i].setAttribute('id','');
		}
		*/
		
		$("#list").empty();
		
		page = 0;
		
		if(type == 1)
		{
			fav_list.data.items.sort(function(a, b)
			{
				return (a.created > b.created) ? -1 : (a.created < b.created) ? 1 : 0;	
			});
		}
		else if(type == 2)
		{
			fav_list.data.items.sort(function(a, b)
			{
				return (parseInt(a.video.likeCount) > parseInt(b.video.likeCount)) ? -1 : (parseInt(a.video.likeCount) < parseInt(b.video.likeCount)) ? 1 : 0;	
			});
		}
		else if(type == 3)
		{
			fav_list.data.items.sort(function(a, b)
			{
				return (parseInt(a.video.viewCount) > parseInt(b.video.viewCount)) ? -1 : (parseInt(a.video.viewCount) < parseInt(b.video.viewCount)) ? 1 : 0;	
			});
		}
		
		$("#loading").show();		
		$("#load").show();

		More();
	}

	function More()
	{
		blist = false;
		
		var response = "";

		$list = $("#list");

		if(page < total)
		{
			var item;
			var max = page + 10;
			
			for(var i=page; i<max; i++)
			{
				if(total<=i)
					break;
				
				if(i < 3)
						dnclass = "btn_down on";
					else
						dnclass = "btn_down";
						
				item = fav_list.data.items[i];
				
				if(!item.video.status)
				{
					response += '<li>';
					response += '<a href="http://www.youtube.com/watch?v=' + item.video.id + '">';
					response += '<dl>';
					response += '<dt>' + item.video.title + '</dt>';
					response += '<dd class="img_area" style="background:url(' + item.video.thumbnail.sqDefault + ') center center no-repeat">';
					//response += '<span>' + time(item.video.duration) + '</span>';
					response += '</dd>';
					response += '<dd class="info_area">';
					response += '<strong>view</strong> <span>' + formatCurrency(item.video.viewCount) + "</span><br>";
					response += '<strong>like</strong> <span>' + formatCurrency(item.video.likeCount) + "</span>";
					//response += '<span class="reply"> ' + formatCurrency(item.video.commentCount) + "</span>";
					response += '</dd>';
					response += '</dl>';
					response += '</a>';
					response += '<button type="button" onclick="javascript:Download(this);" id="' + item.video.id + '" class="' + dnclass + '">down</button>';
					response += '</li>';
				}			
			}		
        }
							
		if(response == "")
			$("#loading").hide();
		else
		{
			$(response).appendTo($list);
			blist = true;
		}
			
				
		Downloads();	
		$("#load").hide();	
			
		page += 10;
			
		if(page >= total)
			$("#loading").hide();
	}


	function Download(obj)
	{
		var classnm = obj.className;
		//var arrdn = localDatabase('get', 'down_kidstube');

		if(classnm.indexOf("btn_down on") != -1)
		{
			window.location.href = "http://kidstube.kr/play.php?v=" + obj.id;
		}
		else
		{
			/*
			if(arrdn)
				arrdn.push(obj.id);
			else
				arrdn = [obj.id];
			
			localDatabase('set', 'down_kidstube', arrdn);
			obj.className = "btn_down on";
			*/
			window.location.href = "http://kidstube.kr/download.php?v=" + obj.id;
		}
	}
	
	// Download checked
	function Downloads()
	{
		/*
		var arrdn = localDatabase('get', 'down_kidstube');

		if(arrdn)
		{
			for(i=0; i<arrdn.length; i++)
			{
				$("#" + arrdn[i]).addClass("btn_down on");
			}
		}
		*/
	}
	
	function Featured()
	{
		var response = "";
		var li = 0;
		var featured_url = "http://picasaweb.google.com/data/feed/api/user/snkidstube@gmail.com/albumid/5797202058520125569?alt=jsonc&kind=photo&max-results=100&orderby=published";
		
		$featured = $("#featured");

		$.getJSON(featured_url + "&start-index=1", function(data)
		{
			$.each(data.data.items, function(i, item) 
			{  
								
				if(i == 0 || ((i + 1) % 3) == 1)
				{
					if(i == 0)
						response += '<li style="display:block">';
					else
						response += '<li style="display:none">';
						
					response += '<div class="box_wrap">';
				}
				
				response += '<a href="featured_list.html#' + item.description + '" style="background:url(' + item.media.image.url + ') center center no-repeat"></a>';
				
				if(((i + 1) % 3) == 0)
				{
					response += '</div>';
					response += '</li>';
				}
			
    		});
    		
			$(response).appendTo($featured);
		})
		.complete(function() 
		{
			// slider
			var slider = new Swipe(document.getElementById('slider'), {
			      callback: function(e, pos) {
			        
			        var i = bullets.length;
			        while (i--) {
			          bullets[i].className = ' ';
			        }
			        bullets[pos].className = 'on';
			
			      }
			    }),
			 bullets = document.getElementById('position').getElementsByTagName('em');
			 
			json_url = "http://gdata.youtube.com/feeds/api/users/snkidstube/favorites?v=2&alt=jsonc&max-results=50&start-index=1";
		
			fav_list = getData(json_url);
	        total = fav_list.data.items.length;
	        LinkList(1, 0);
		});
	}	
-->
</script>

<style>
	
</style>
</head>
<body id="home">
	<header>
		<h1 class="blind">S&TV-KIDS</h1>
		<div id="slider">
			<ul id="featured"></ul>
		</div><!-- end slider -->
		<div class="dot">
			<span id='position'><em class='on'>&bull;</em><em>&bull;</em><em>&bull;</em></span>
		 </div>
		<nav>
			<button type="button" class="btn_new" onclick="javascript:LinkList(1, 0);">NEW</button><button type="button" class="btn_best" onclick="javascript:LinkList(2, 1);">BEST</button>
		</nav>
		<div class="bg_animal"></div>
		<div class="bg_cloud"></div>
		<div class="bg_cloud2"></div>
		<div class="bg_cloud3"></div>
	</header>
	<div class="list_section">
		<ul class="list" id="list"></ul>
		<div id="loading">
			<div id="load" style="display:none;"></div>
		</div>
	</div>
</body>
</html>
<script>
	var opts = {
	  lines: 8, // The number of lines to draw
	  length: 4, // The length of each line
	  width: 3, // The line thickness
	  radius: 6, // The radius of the inner circle
	  color: '#000', // #rgb or #rrggbb
	  speed: 1, // Rounds per second
	  trail: 54, // Afterglow percentage
	  shadow: false // Whether to render a shadow
	};
	var target = document.getElementById('load');
	var spinner = new Spinner(opts).spin(target);
</script>